<template>
	<div class="selectgrid">
		<el-form :model="location" class="demo-ruleForm" label-width="120px" status-icon style="width: 800px;" >
		<el-card class="box-card" style="height: 80vh;">
			
			<template #header>
				<div class="card-header">
					<span><h3>选择网格</h3></span>
				</div>
			</template>

		<el-form-item label="省:">
	    <el-select
	      v-model="location.provinceValue"
	      placeholder="Select Province"
	      size="large"
	      style="width: 240px"
		  @change="handleProvinceChange"
	    >
	      <el-option
	        v-for="item in provinces"
	        :key="item.id"
	        :label="item.province"
	        :value="item.id"
	      />
			</el-select>
		</el-form-item>
		
		<el-form-item label="市:">
			<el-select
			v-model="location.cityValue"
			placeholder="Select City"
			size="large"
			style="width: 240px"
			:disabled="!location.provinceValue"
			>
			<el-option
			v-for="item in citys"
			:key="item.id"
			:label="item.city"
			:value="item.id"
			/>
			</el-select>
		</el-form-item>
		
		<el-form-item label="详细地址:">
			<el-input v-model="location.detailedAddress"></el-input>
		</el-form-item>
		<el-button @click="nextstep">下一步</el-button>
		<el-button @click="test">测试</el-button>
		
			</el-card>
		</el-form>
	</div>
</template>

<script  setup>
import { computed, onMounted, onUpdated, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from '../../axios';

const tokenValue=localStorage.getItem('token')
let location=ref({
	provinceValue:'',
	cityValue:'',
	detailedAddress:''
	
})
const router=useRouter()
const route=useRoute()
const routequery=route.query
let nextstep=()=>{
	router.push({
		path:'/supervisor/selectaqi',
		query:{
			province:location.value.provinceValue,
			city:location.value.cityValue,
			detailedAddress:location.value.detailedAddress,
		}
	})
	
}
const provinces = ref([])
const citys=ref([])
onMounted(()=>{
	
	axios.get('http://localhost:7000/service-admin/province/getAllProvince',
		{
			headers: {
			  'Authorization': `Bearer ${tokenValue}`,
			},
		})
	  .then(response => {
		provinces.value=response.data.sendResult
		
	  })
	  .catch(error => {
	    console.error('Error:', error);
	  });   
});

// 使用 computed 动态计算目标省份对象,所有省和市的值为其id
const provinceTarget = computed(() => {
  const a= provinces.value.find(option => option.id === location.value.provinceValue);
  return a;
  
});


// 监听 location.value.provinceValue 的变化
watch(() => location.value.provinceValue, async (newVal, oldVal) => {
  if (provinceTarget.value) {
	const provinceid = provinceTarget.value.id;
	try {
	  const response = await axios.get('http://localhost:7000/service-admin/city/getByProvince', {
		params: {
		  provinceId: provinceid
		},
		headers: {
		  'Authorization': `Bearer ${tokenValue}`,
		}
	  });
	  citys.value = response.data.sendResult;

	} catch (error) {
	  console.error('Error fetching cities:', error);
	}
  } else {
	console.error(`Province not found`);
  }
  console.log(location.value);
});

const handleProvinceChange = () => {
  location.value.cityValue = ''
}
</script>

<style>
	.selectgrid{
		height: 100vh;
		display:flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
		background-color: gray;
	}
	.demo-ruleForm {
		height: 80vh;
		width: 50vw;
		display: flex;
		justify-content: center; 
		align-items: center; 
		height: 80vh; 
	  
	}
</style>